<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .btn1 {
        display: none;
      }
      .btn2 {
        opacity: 0;
      }
      .btn3 {
        visibility: hidden;
      }
      .btn4 {
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <!-- 
      隐藏元素的方式：
        1. display: none; 不占位，不会响应事件
        2. opacity: 0; 占位，会响应事件
        3. visibility: hidden; 占位，不会响应事件
        4. 通过定位将元素定位到屏幕外
        5. 通过translate将元素移到屏幕外
        6. transform: scale(0)
        7. transform: rotateY(90deg)

        实际开发隐藏元素，在Vue项目中：v-if 或 v-show
   -->

    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <button class="btn3">按钮3</button>
    <button class="btn4">按钮4</button>
    <script>
      document.querySelector(".btn1").onclick = function () {
        console.log("按钮1");
      };
      document.querySelector(".btn2").onclick = function () {
        console.log("按钮2");
      };
      document.querySelector(".btn3").onclick = function () {
        console.log("按钮3");
      };
    </script>
  </body>
</html>
